import {
  Button,
  Table,
  Switch,
  DatePicker,
  Space,
  Form,
  Input,
} from "antd";
import React, { useState } from "react";
//日期选择框
const { RangePicker } = DatePicker;
const columns = [
  {
    title: "操作时间",
    dataIndex: "item",
    //左固定列表
    fixed: "left",
  },
  {
    title: "订单编号",
    dataIndex: "name",
  },
  {
    title: "患者姓名",
    dataIndex: "kind", //影响render函数的第一个参数 dataIndex 表示把当前本条数据的某一个key取出来
    render(obj) {
      return obj?.KindName || "暂无数据";
    },
  },
  {
    title: "就诊卡号",
    dataIndex: "kind", //影响render函数的第一个参数 dataIndex 表示把当前本条数据的某一个key取出来
    render(obj) {
      return obj?.KindName || "暂无数据";
    },
  },
  {
    title: "住院号",
    dataIndex: "kind", //影响render函数的第一个参数 dataIndex 表示把当前本条数据的某一个key取出来
    render(obj) {
      return obj?.KindName || "暂无数据";
    },
  },
  {
    title: "来源",
    dataIndex: "kind", //影响render函数的第一个参数 dataIndex 表示把当前本条数据的某一个key取出来
    render(obj) {
      return obj?.KindName || "暂无数据";
    },
  },
  {
    title: "业务类型",
    dataIndex: "kind", //影响render函数的第一个参数 dataIndex 表示把当前本条数据的某一个key取出来
    render(obj) {
      return obj?.KindName || "暂无数据";
    },
  },
  {
    title: "支付方式",
    dataIndex: "stock",
    render(obj) {
      return obj?.KindName || "微信";
    },
  },
  {
    title: "支付金额(元)",
    dataIndex: "link",
    render(link) {
      return <a href={link}>{link}</a>;
    },
  },
  {
    title: "支付状态",
    dataIndex: "putaway",
    //右固定
    // fixed: "right",
    render(putaway) {
      return (
        <Switch
          checkedChildren="已缴费"
          unCheckedChildren="未缴费"
          checked={putaway}
        />
      );
    },
  },
  {
    title: "卡内余额(元)",
    dataIndex: "desc",
  },
  {
    title: "操作",
    render() {
      //数组 需要加key  或者可以使用 <> 空标签 </> 则不需要加key
      return [
        <Button type="danger" size="small" key="del">
          删除
        </Button>,
        ` `,
        <Button type="primary" size="small" key="update">
          修改
        </Button>,
      ];
    },
  },
];

//操作时间
const data = [];
for (let i = 0; i < 46; i++) {
  const time = new Date().toISOString().substring(0, 10);
  data.push({
    key: i,
    name: `20220820${i++}${i}`,
    item: `${time}`,
    stock: "余额",
    address: `London, Park Lane no. ${i}`,
  });
}
const CopCost = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const onSelectChange = (newSelectedRowKeys) => {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  const hasSelected = selectedRowKeys.length > 0;

  //搜索框
  const onFinish = (values) => {
    console.log("Received values from form: ", values);
  };
  return (
    <div>
      <div
        style={{
          marginBottom: 16,
        }}
      >
        <span>住院充值记录</span>
        <span
          //全选框所在位置样式
          style={{
            marginLeft: 8,
          }}
        >
          {/* 全选统计 */}
          {hasSelected ? `/ 选择 ${selectedRowKeys.length} 项` : ""}
        </span>
      </div>
      {/* 日期选择框 */}
      <Space direction="vertical" size={12}>
        <RangePicker placeholder={["开始时间", "结束时间"]} />
      </Space>
      &nbsp;&nbsp;&nbsp;&nbsp;
      {/* 搜索框 */}
      <Form
        layout="inline"
        onFinish={onFinish}
        //去除输入框提示
        autoComplete="off"
        initialValues={{
          price: {
            number: 0,
            currency: "rmb",
          },
        }}
      >
        <Form.Item
          name="username"
          // label="账号"
          rules={[]}
        >
          <Input placeholder="请输入病人姓名" />
        </Form.Item>
        {/* 搜索按钮 */}
        <Form.Item>
          <Button type="primary" htmlType="submit">
            搜索
          </Button>
        </Form.Item>
      </Form>
      {/* 表格内容 */}
      <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
    </div>
  );
};

export default CopCost;
